<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/css.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css" />
</head>
<style>
    .goods-titler {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .goods-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .goods-titler {
        height: 30px;
        border: 1px solid rgba(0, 0, 0, .2);
        overflow: hidden;
        border-radius: 3px;

    }

    .goods-titler input {
        width: 30px;
        height: 30px;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .numbers {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .goods-titler i {
        color: #159548;
        font-size: 18px;
    }

    .goods-titler .jian2 i {
        color: #999999;
    }

    .goods-titler div {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        box-sizing: border-box;
        background: #F4F4F4;
    }

    .icon-shenglve {
        right: 10px;
        font-size: 18px;
    }

    header ul li em.right {
        font-size: 28px;
    }

    .addshopingl {
        width: 30%;
    }

    .addshopingr {
        width: 70%;
    }

    [v-cloak] {
        display: none;
    }
    .goods-detail p{
        text-indent: 0;
        text-align: left;
        line-height: 30px;
    }
    .goods-detail div{
        text-indent: 0;
        text-align: left;
        line-height: 30px;
    }
    .goods-detail span{
        display: inline;
    }
    .goods-detail img {
        display: block;
        margin: 10px auto;
        width: 94% !important;
        height: auto !important;
    }
</style>

<body>
    <div v-cloak id="wrap" class="flex-wrap flex-vertical">
        <header>
            <ul>
                <li class="active">
                    <i onclick="back()" class="icon iconfont icon-back"></i>
                    <span>商品详情</span>
                    <em class="right icon iconfont icon-shenglve" @click="wxshare"></em>
                </li>
            </ul>
        </header>
        <div class="fixed-header">
            <div class="goods-bodys">
                <div class="goods-banner">
                    <img :src="goods.thumb|filtersImg" alt="">
            </div>
                    <div class="goods-title">
                        <div class="goods-titlel">
                            <div class="goods-title1">{{goods.title}}{{goods.weigh}}</div>
                            <div class="goods-price">￥{{goods.price}}</div>
                        </div>
                        <div class="goods-titler">
                            <div class="jian jian2" v-if="goodnum<=1">-</div>
                            <div class="jian" @click="jian" v-else>-</div>
                            <div class="numbers"><input type="number" v-model="goodnum"></div>
                            <div class="jia" @click="jia">+</div>
                        </div>
                    </div>
                    <div class="bgf4"></div>
                    <div class="goods-body">
                        <div class="goods-body-title">
                            <p>商品详情</p>
                        </div>
                        <div class="goods-detail" v-html="desc">
                        <!-- <img v-else :src="vadiourl" alt="" /> -->
                    </div>
                </div>
            </div>
            <div class="addshoping">
                <div class="addshopingl" @click="goCart">
                    <i class="icon iconfont icon-x-cart"></i>
                    <p>购物车({{num}})</p>
                </div>
                <div class="addshopingr" @click="addCart">
                    加入购物车
                </div>
            </div>
        </div>
</body>

</html>
<script src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/common.js"></script>
<script>
var MNActionButton;

apiready = function() {
    MNActionButton = api.require('MNActionButton');
    var wx = api.require('wx');
    var vm = new Vue({
        el: "#wrap",
        data: {
            about: '',
            id: 0,
            goods: [],
            num: '',
            goodnum: 1,
            desc: ''
        },
        mounted: function() {
            var that = this;

            that.id = api.pageParam.name
            console.log(that.id)
            that.refresh()
            that.getGoods()

        },
        methods: {
            wxshare: function() {
                var that = this;
                that.wxshareget()
            },
            wxshareget: function() {
                var that = this;
                var token = $api.getStorage('userInfo').token
                api.ajax({
                    url: ajaxRoute.wxshare,
                    method: 'post',
                    data: {
                        values: {
                            token: token,
                            type: 2,
                            gid: that.goods.id
                        }
                    }
                }, function(res, err) {
                    if (res.code == 1) {
                        that.sharecheck(res.data.title, that.goods.title, res.data.url)
                    } else {
                        api.toast({ msg: res.msg, location: 'middle' });
                    }
                });
            },
            sharecheck: function(title, desc, url) {
                api.openFrame({
                    name: 'address',
                    url: 'widget://html/share.html',
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                    },
                    bgColor: 'rgba(0,0,0,0.6)',
                    pageParam: {
                        title: title,
                        desc: desc,
                        url: url,

                    }
                });
            },
            // sharecheck: function (e) {
            //     var that = this;
            //     if (e == 0) {
            //         var Vscene = 'session'
            //     } else {
            //         var Vscene = 'timeline'
            //     }
            //     var timestamp = Date.parse(new Date());
            //     var img = ajaxUrl + that.goods.thumb
            //     api.download({
            //         url: img,
            //         encode: false,
            //         savePath: 'fs://' + timestamp + '.jpg', //保存的路径
            //         report: true,
            //         cache: true,
            //         allowResume: true
            //     }, function (ret, err) {
            //         if (ret.state == 1) {
            //             wx.isInstalled(function (ret, err) {
            //                 if (ret.installed) {
            //                     //已安装微信
            //                     wx.shareImage({
            //                         apiKey: '',
            //                         scene: Vscene,
            //                         thumb: 'widget://image/logo.jpg',
            //                         contentUrl: 'fs://' + timestamp + '.jpg'
            //                     }, function (ret, err) {
            //                         if (ret.status) {
            //                             alert('分享成功');
            //
            //                         } else {
            //                             //                            myalert('分享失败' + err.code);
            //                             alert(JSON.stringify(ret));
            //                         }
            //                     });
            //                 } else {
            //                     alert('当前设备未安装微信客户端');
            //                 }
            //             });
            //         } else {
            //
            //         }
            //     });
            // },
            jia: function() {
                this.goodnum++
            },
            jian: function() {
                if (this.goodnum > 1) {
                    this.goodnum--
                }
            },

            getGoods: function() {
                var that = this;
                showProgress();
                var token = $api.getStorage('userInfo').token
                api.ajax({
                    url: ajaxRoute.goodsdetail,
                    method: 'post',
                    data: {
                        values: {
                            gid: that.id
                        }
                    }
                }, function(res, err) {
                    console.log(JSON.stringify(res.data))
                    if (res.code == 1) {
                        api.hideProgress();
                        that.goods = res.data
                        var str = res.data.desc
                        that.desc = str.replace(/src=\"\/uploads/g, 'src="' + ajaxUrl + '/uploads/')

                        console.log('----------------------')
                        console.log(that.desc)
                    } else {
                        api.hideProgress();
                        api.toast({ msg: res.msg, location: 'middle' });
                    }
                });
            },
            // 刷新选中数量
            refresh: function(e) {
                var that = this;
                showProgress();
                var token = $api.getStorage('userInfo').token
                api.ajax({
                    url: ajaxRoute.refresh,
                    method: 'post',
                    data: {
                        values: {
                            token: token
                        }
                    }
                }, function(res, err) {
                    api.hideProgress();
                    console.log('=========================================')
                    console.log(JSON.stringify(res))
                    console.log('=========================================')
                    if (res.code == 1) {
                        that.num = res.data
                    } else {
                        api.toast({ msg: res.msg, location: 'middle' });
                    }
                })
            },
            addCart: function() {
                var that = this;
                showProgress();
                var token = $api.getStorage('userInfo').token
                api.ajax({
                    url: ajaxRoute.additem,
                    method: 'post',
                    data: {
                        values: {
                            token: token,
                            gid: that.id,
                            amount: that.goodnum
                        }
                    }
                }, function(res, err) {
                    console.log(JSON.stringify(res.data))
                    if (res.code == 1) {
                        api.hideProgress();
                        that.refresh()
                        api.toast({ msg: res.msg, location: 'middle' });
                    } else {
                        api.hideProgress();
                        api.toast({ msg: res.msg, location: 'middle' });
                    }
                });
            },
            goCart: function() {
                openWinto('my', '../my/shoppingcart')
            }

        },
        filters: {
            getTel: function(value) {
                var phone = value
                return phone.substr(0, 3) + "****" + phone.substr(7)
            },
            getCard: function(value) {
                var phone = value
                return phone.substr(0, 5) + "********" + phone.substr(12)
            },
            getchecked: function(e) {
                var checked = ''
                if (e == 0) {
                    checked = '审核中'
                } else {
                    checked = '已审核'
                }
                return checked
            },
            filtersImg: function(img) {
                var imgs = ajaxUrl + '/' + img
                console.log(imgs)
                return imgs;
            }
        }
    })
}
</script>
